<page-header> </page-header>
<nz-card [nzBordered]="false">
  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
    <div nz-col nzMd="8" nzSm="24" class="grid-border">
      <nz-card [nzBordered]="false">
        <form nz-form [nzLayout]="'inline'" (ngSubmit)="onGroupSearch()" class="search__form">
          <div nz-col nzMd="16" nzSm="24">
            <nz-form-item>
              <nz-form-label nzFor="groupName">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
              <nz-form-control>
                <input
                  nz-input
                  [(ngModel)]="groupQuery.params.groupName"
                  [ngModelOptions]="{ standalone: true }"
                  name="groupName"
                  placeholder=""
                  id="groupName"
                />
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8" [class.text-right]="groupQuery.expandForm">
            <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="groupQuery.submitLoading">{{
              'mxk.text.query' | i18n
            }}</button>
          </div>
        </form>
      </nz-card>
      <nz-table
        #dynamicTable
        nzTableLayout="auto"
        nzSize="small"
        nzBordered
        nzShowSizeChanger
        [nzData]="groupQuery.results.rows"
        [nzFrontPagination]="false"
        [nzTotal]="groupQuery.results.records"
        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions"
        [nzPageSize]="groupQuery.params.pageSize"
        [nzPageIndex]="groupQuery.params.pageNumber"
        [nzLoading]="this.groupQuery.tableLoading"
        (nzQueryParams)="onGroupQueryParamsChange($event)"
      >
        <thead>
          <tr>
            <th></th>
            <th nzAlign="center" style="display: none">Id</th>
            <th nzAlign="center">{{ 'mxk.groups.name' | i18n }}</th>
            <th nzAlign="center">{{ 'mxk.groups.category' | i18n }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of groupQuery.results.rows">
            <td
              [nzChecked]="groupQuery.tableCheckedId.has(data.id)"
              [nzDisabled]="data.disabled"
              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"
            ></td>
            <td nzAlign="left" style="display: none">
              <span>{{ data.id }}</span>
            </td>
            <td nzAlign="left"> {{ data.groupName }}</td>
            <td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.groups.category.dynamic' | i18n }}</td>
            <td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.groups.category.static' | i18n }}</td>
            <td nzAlign="center" *ngIf="data.category == 'app'"> {{ 'mxk.groups.category.app' | i18n }}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div nz-col nzMd="16" nzSm="24" class="grid-border">
      <nz-card [nzBordered]="false">
        <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
          <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
            <div nz-col nzMd="10" nzSm="24">
              <nz-form-item>
                <nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
                <input
                  nz-input
                  [(ngModel)]="query.params.groupName"
                  [ngModelOptions]="{ standalone: true }"
                  readonly
                  placeholder=""
                  disabled
                />
              </nz-form-item>
            </div>
            <div nz-col nzMd="10" nzSm="24">
              <nz-form-item>
                <nz-form-label nzFor="name">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
                <nz-form-control>
                  <input
                    nz-input
                    [(ngModel)]="query.params.appName"
                    [ngModelOptions]="{ standalone: true }"
                    name="appName"
                    placeholder=""
                    id="appName"
                  />
                </nz-form-control>
              </nz-form-item>
            </div>
            <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
              <button nz-button type="submit" [nzType]="'primary'">{{ 'mxk.text.query' | i18n }}</button>
              <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
              <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
              >
            </div>
          </div>
        </form>
      </nz-card>
      <nz-card [nzBordered]="false">
        <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
          <div nz-col [nzSpan]="24" class="table-list-toolbar">
            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
            <button
              nz-button
              type="button"
              [disabled]="tableHasCheckedItem()"
              nz-popconfirm
              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
              nzPopconfirmPlacement="left"
              [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
              (nzOnConfirm)="onBatchDelete()"
              [nzType]="'primary'"
              nzDanger
              class="mx-sm"
              >{{ 'mxk.text.batchDelete' | i18n }}</button
            >
          </div>

          <div nz-col nzMd="24" nzSm="24">
            <nz-table
              #dynamicTable
              nzTableLayout="auto"
              nzSize="small"
              nzBordered
              nzShowSizeChanger
              [nzData]="query.results.rows"
              [nzFrontPagination]="false"
              [nzTotal]="query.results.records"
              [nzPageSizeOptions]="query.params.pageSizeOptions"
              [nzPageSize]="query.params.pageSize"
              [nzPageIndex]="query.params.pageNumber"
              [nzLoading]="this.query.tableLoading"
              (nzQueryParams)="onQueryParamsChange($event)"
            >
              <thead>
                <tr>
                  <th
                    [nzChecked]="query.checked"
                    [nzIndeterminate]="query.indeterminate"
                    (nzCheckedChange)="onTableAllChecked($event)"
                  ></th>
                  <th nzAlign="center" style="display: none">Id</th>
                  <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
                  <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
                  <th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
                  <th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
                  <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of query.results.rows">
                  <td
                    [nzChecked]="query.tableCheckedId.has(data.id)"
                    [nzDisabled]="data.disabled"
                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"
                  ></td>
                  <td nzAlign="left"> {{ data.groupName }}</td>
                  <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
                  <td nzAlign="left"> {{ data.appName }}</td>
                  <td nzAlign="left">
                    <div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
                    <div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
                    <div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
                    <div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
                    <div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
                    <div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
                    <div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
                    <div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
                    <div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
                    <div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
                    <div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
                    <div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
                    <div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
                    <div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
                    <div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
                    <div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
                    <div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
                    <div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
                    <div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
                    <div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
                    <div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
                    <div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
                    <div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
                    <div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
                    <div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
                    <div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
                    <div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
                    <div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
                  </td>
                  <td nzAlign="center" nzBreakWord="false">
                    <div nz-col>
                      <button
                        nz-button
                        type="button"
                        nz-popconfirm
                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
                        nzPopconfirmPlacement="left"
                        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
                        (nzOnConfirm)="onDelete(data.id)"
                        nzDanger
                        >{{ 'mxk.text.delete' | i18n }}</button
                      >
                    </div>
                  </td>
                </tr>
              </tbody>
            </nz-table>
          </div>
        </div>
      </nz-card>
    </div>
  </div>
</nz-card>
